<template>
    <div class="commodity">
        <manage-head :dialog-visible="dialogVisible" :search="search" @clearData="clearData"
            @setDialogVisible="setDialogVisible" @setUpdate="setUpdate" @setSearch="setSearch"></manage-head>
        <el-table :data="commodityList" style="width: 100%">
            <el-table-column prop="commodity.img" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.commodity.img">
                </template>
            </el-table-column>
            <el-table-column prop="commodity.name" label="商品名称">
            </el-table-column>
            <el-table-column prop="commodity.price" label="商品价格">
            </el-table-column>
            <el-table-column prop="commodity.price" label="是否上架">
                <template slot-scope="scope">
                    <span v-show="scope.row.commodity.status == 0">否</span>
                    <span v-show="scope.row.commodity.status == 1">是</span>
                </template>
            </el-table-column>
            <el-table-column prop="store.name" label="店铺名称">
            </el-table-column>
            <el-table-column prop="storeCategories.categories" label="分类名称">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <Pagination :page="page" @currentChangeEvent="currentChangeEvent"></Pagination>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="form-box">
                <Upload :image-path="commodity.img" @setImagePath="setImagePath"></Upload>
                <el-input v-model="commodity.name" placeholder="请输入商品名称"></el-input>
                <el-input v-model="commodity.price" placeholder="请输入商品价格"></el-input>
                <!-- <el-input v-model="commodity.status" placeholder="是否上架"></el-input> -->
                <div>
                    是否上架
                    <el-radio v-model="commodity.status" label="1">是</el-radio>
                    <el-radio v-model="commodity.status" label="0">否</el-radio>
                </div>
                <el-cascader v-model="storeCategoriesValue" :options="options" :props="{ expandTrigger: 'hover' }"
                    @change="handleChange" placeholder="请选择分类"></el-cascader>

                <div>
                    排序
                    <el-input-number v-model="commodity.sort" label="排序" placeholder="排序"></el-input-number>
                </div>
                <el-input type="textarea" v-model="commodity.intro" placeholder="请输入简介"></el-input>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import ManageHead from '@/components/manage/ManageHead.vue'
import Upload from '@/components/Upload/Upload.vue'
import Pagination from '@/components/manage/Pagination.vue'

import ObjectNotEmpty from '@/utils/common/ObjectNotEmpty'

import COMMODITY_API from '@/api/commodity'
import CATEGORY_API from '@/api/category'
export default {
    components: {
        Upload,
        ManageHead,
        Pagination,
    },
    data() {
        return {
            dialogVisible: false,
            storeCategoriesValue: [],
            options: [],
            search: '',
            update: 0,
            commodityList: [],
            commodity: {
                "id": null,
                "categoriesId": "",
                "intro": "",
                "name": "",
                "price": null,
                "sort": null,
                "img": "",
                "status": "",
            },
            page: {
                "total": 2,
                "size": 10,
                "current": 1,
                "pages": 1
            }
        }
    },
    created() {
        this.getCommodityList(1)
        this.getStoreCategoryList()
    },
    methods: {
        getCommodityList(current) {
            let data = {
                current
            }
            this.$axios.post(COMMODITY_API.getCommodityList, data)
                .then(res => {
                    if (res.code == 200) {
                        this.$success(res.message)
                        this.commodityList = res.data.commodityList.records
                    } else this.$error(res.message)
                })
        },
        getStoreCategoryList() {
            this.$axios.post(CATEGORY_API.GET_CATEGORY_LIST_BY_USERID)
                .then(res => {
                    if (res.code == 200) {
                        let storeCategoriesList = res.data.storeCategoriesList
                        for (let i = 0; i < storeCategoriesList.length; i++) {

                            let store = storeCategoriesList[i].store
                            let categoriesList = storeCategoriesList[i].storeCategories

                            let storeOption = {
                                label: store.name,
                                value: store.id,
                                children: [],
                            }

                            for (let j = 0; j < categoriesList.length; j++) {
                                let categories = categoriesList[j]
                                let obj = {
                                    label: categories.categories,
                                    value: categories.id
                                }

                                storeOption.children.push(obj)
                            }

                            this.options.push(storeOption)
                        }
                    } else this.$error(res.message)
                })
        },
        setUpdate(val) {
            this.update = val
        },
        setDialogVisible(val) {
            this.dialogVisible = val
        },
        setSearch(val) {
            this.search = val
        },
        edit(data) {
            this.dialogVisible = true

            this.update = 1

            let commodity = data.commodity

            let keys = Object.keys(this.commodity)
            for (let i = 0; i < keys.length; i++) {
                let key = keys[i]
                this.commodity[key] = commodity[key]
            }
            this.storeCategoriesValue[0] = data.store.id
            this.storeCategoriesValue[1] = data.commodity.categoriesId
        },
        currentChangeEvent(current){
            this.getCommodityList(current)
        },
        clearData() {
            this.commodity = {
                "id": null,
                "categoriesId": "",
                "intro": "",
                "name": "",
                "price": null,
                "sort": null,
                "img": "",
                "status": "",
            }

            this.storeCategoriesValue = []
        },
        del(data) {
            let commodity = data.commodity
            data = commodity
            this.$axios.delete(COMMODITY_API.deleteCommodity, { data })
                .then(res => {
                    if (res.code == 200) {
                        this.$success(res.message)
                        this.getCommodityList(this.current)
                    } else this.$error(res.message)
                })
        },
        confirm() {

            let data = this.commodity
            //新增
            if (this.update == 0) {
                debugger
                let notEmpty = ObjectNotEmpty(data, ['id'])

                if (!notEmpty) {
                    this.$error("请输入完整信息")
                    return
                }

                this.$axios.post(COMMODITY_API.addCommodity, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getCommodityList(this.current)

                            this.dialogVisible = false
                        } else this.$error(res.message)
                    })
            }

            else {

                let notEmpty = ObjectNotEmpty(data)

                if (!notEmpty) {
                    this.$error("请输入完整信息")
                    return
                }

                this.$axios.put(COMMODITY_API.updateCommodity, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getCommodityList(this.current)

                            this.dialogVisible = false

                        }
                        else this.$error(res.message)
                    })
            }
        },
        setImagePath(val) {
            this.commodity.img = val
        },
        handleChange(val) {
            this.commodity.categoriesId = val[1]
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>

<style scoped>
img {
    width: 50px;
    height: 50px;
}

.form-box div {
    margin: 10px 0;

    display: block;
}
</style>